<!--
 * @Author: fleeting-ln 3518413017@qq.com
 * @Date: 2023-11-14 22:04:15
 * @LastEditors: XY
 * @LastEditTime: 2023-12-13 13:19:38
 * @FilePath: \friendsApp\see_you\src\views\user\location.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <van-sticky id="stickyHeight">
      <navbar title="定位" @onClickLeft="onClickLeft"></navbar>
      <div class="search-class">
        <van-search v-model="cityName" :clearable="false" show-action shape="round" placeholder="请输入城市名称"
          @search="onSearch">
          <template #action>
            <div v-if="!isSearch" @click="onSearch">搜索</div>
            <div v-else @click="cancel">取消</div>
          </template>
        </van-search>
      </div>
    </van-sticky>
    <div class="content-class" :style="{ height: windowHeight - stickyHeight + 'px' }">
      <div>
        <span v-if="list.length > 0 && isSearch">
          <van-cell v-for="item in list" :key="item.city_code" :title="item.name" @click="onIndexCity(item)" /></span>
        <div v-show="!isSearch" class="dqdiwcs-class">
          <div>
            <div>当前定位城市</div>
            <div>
              <div @click="onSelecCity">
                <van-image width="14" height="14" :src="require('../../assets/iconLocation/location@2x.png')" />
                <div style="margin-left: 1px">
                  {{ currentCity[0] || '获取中...' }}
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>热门城市</div>
            <div>
              <div v-for="(val, key) in hotCity" :key="key" @click="onHotCity(val)">
                {{ val.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="index-class" v-show="!isSearch">
        <van-index-bar :index-list="indexList">
          <div v-for="(val, key) in indexArr" :key="key">
            <van-index-anchor :index="key" />
            <van-cell v-for="(item, indexS) in val" :title="item.name" :key="indexS" @click="onIndexCity(item)" />
          </div>
        </van-index-bar>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import { cityList, hotCity, positioning, getregeo } from '@/api/index'
import { location } from '@/utils/getLocation'
import { sy_convertCityNameToCityCode } from '@/utils/location_convert'
import middleUtils from '@/utils/middleUtil'
export default {
  name: 'location',
  components: {
    navbar,
  },
  data() {
    return {
      stickyHeight: 0,
      windowHeight: 0,
      isSearch: false,
      cityName: '',
      currentCity: [],
      indexList: [],
      hotCity: {},
      indexArr: {},
      list: [],
    }
  },
  beforeDestroy() {
    middleUtils.$off('getCity')
  },

  mounted() {
    this.stickyHeight = document.getElementById('stickyHeight').clientHeight
    this.windowHeight = document.documentElement.clientHeight
    this.init()
  },
  methods: {
    init() {
      cityList().then((res) => {
        console.log(res)
        this.indexList = Object.getOwnPropertyNames(res.data.city_data)
        this.indexArr = res.data.city_data
      })
      hotCity().then((res) => {
        this.hotCity = res.data.city_hot_data
      })

      this.getPositioning()
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch() {
      let list = []
      for (const key in this.indexArr) {
        if (Object.hasOwnProperty.call(this.indexArr, key)) {
          const element = this.indexArr[key]
          let newlist = element.find((item) =>
            item.name.includes(this.cityName)
          )
          if (newlist) {
            list = list.concat([newlist])
          }
        }
      }
      this.list = list
      if (this.cityName) {
        this.isSearch = true
      }
    },
    //取消
    cancel() {
      this.isSearch = false
      this.cityName = ''
    },
    //热门城市点击
    onHotCity(item) {
      if (item.id != 0) {
        middleUtils.$emit('getCity', item)
        console.log(item)
        this.$router.go(-1)
      } else {
        this.$toast('不能选择全部，请选择其他城市')
      }
    },
    // 索引城市点击
    onIndexCity(item) {
      middleUtils.$emit('getCity', item)
      console.log(item)
      this.$router.go(-1)
    },
    getPositioning() {
      // location
      if (!this.$store.getters['cityInfo']) {
        this.$store.dispatch('getCityInfo', '')
      } else {
        this.currentCity[0] = this.$store.getters['cityInfo'].city_name
        this.currentCity[1] = this.$store.getters['cityInfo'].city_code

      }
    },
    onSelecCity() {
      let item = {
        name: this.currentCity[0],
        city_code: this.currentCity[1],
      }
      middleUtils.$emit('getCity', item)
      this.$router.go(-1)
    },
  },
}
</script>
  
<style scoped lang="scss">
::v-deep .van-nav-bar__title {
  font-size: 16px !important;
  font-family: PingFangSC-Medium, PingFang SC !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
}

.search-class {
  padding: 0px 16px;
  position: relative;
  z-index: 99;
  background-color: white;

  ::v-deep & .van-field__left-icon {
    display: none !important;
  }

  ::v-deep & .van-search--show-action {
    box-sizing: border-box !important;
    padding: 0px !important;
  }

  ::v-deep & .van-field__control {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #767676;
  }

  ::v-deep & .van-search__content--round {
    border-radius: 8px 0px 0px 8px;

    border: 1px solid #cde1fd;
    border-right: 0px;
  }

  ::v-deep & .van-search__action {
    width: 60px;
    background: linear-gradient(180deg, #3764ec 0%, #6b85f7 100%);
    border-radius: 0px 8px 8px 0px;
    height: 35.4px;
    text-align: center;
    line-height: 38px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}

.content-class {
  // height: 800px;
  overflow-y: auto;
  // margin-top: -10px;

  &>div:nth-child(1) {
    padding: 0px 16px;

    .dqdiwcs-class {
      padding-right: 10px;

      &>div:nth-child(1) {
        &>div:nth-child(1) {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #767676;
          margin: 16px 0px 8px 0px;
        }

        &>div:nth-child(2) {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1a1a1a;

          &>div {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 75px;
            height: 30px;
            border-radius: 8px;
            border: 1px solid #d8d8d8;
          }
        }
      }

      &>div:not(:first-child) {
        &>div:nth-child(1) {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #767676;
          margin: 16px 0px 8px 0px;
        }

        &>div:nth-child(2) {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1a1a1a;
          flex-wrap: wrap;
          justify-content: flex-start;
          /* 左对齐 */

          &>div {
            margin-right: 20px;
            margin-bottom: 6px;
            width: calc((100% - 70px) / 4);
            height: 30px;
            border-radius: 8px;
            border: 1px solid #d8d8d8;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          &>div:nth-of-type(4n + 0) {
            margin-right: 0;
          }
        }
      }
    }
  }

  .index-class {
    position: relative;

    ::v-deep & .van-index-bar__sidebar {
      font-size: 14px !important;
      font-family: PingFangSC-Regular, PingFang SC !important;
      font-weight: 400 !important;
      color: #d8d8d8 !important;
    }

    ::v-deep & .van-index-anchor {
      background: #f6f6f6;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #767676;
    }
  }
}
</style>
  